import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';
class Counter extends Component{
    //设置默认属性
    static defaultProps={title:'计数器'}
    //执行初始化
    constructor(props){
        super(props);//this.props=props 就是把传递进来的属性对象挂载到当前实例的props属性上
        this.state={number:0};//初始化状态
        console.log('1.constructor');
    }
    UNSAFE_componentWillMount(){
        console.log('2.componentWillMount');
    }
    componentDidMount(){
        console.log('4.componentDidMount');
    }
    shouldComponentUpdate(nextProps,nextState){
        console.log('5.shouldComponentUpdate');
          //如果新的状态是偶数就更新，奇数就不更新。更新指的是修改浏览器的页面，但是状态本身肯定是会更新的
          return nextState.number%2===0
    }
    UNSAFE_componentWillUpdate(){
        console.log('6.componentWillUpdate');
    }
    componentDidUpdate(){
        console.log('7.componentDidUpdate');
    }
    
    handleClick=()=>{
        this.setState({number:this.state.number+1})
    }

    render(){
        console.log('3.render');
        return (
            <div>
                <p>{this.props.title}:{this.state.number}</p>
                <button onClick={this.handleClick}>+</button>
            </div>
        )
    }

}

let element = <Counter title="counter"/>
let root = createRoot(document.getElementById('root'))
root.render(element);